<template>
    <div>
        <router-view></router-view>
        <div class="app-container">
            <div class="nav-bar"><div class="tabs"><div class="tab active">推荐</div><div class="tab">精选</div></div><div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><span>搜索</span></div></div>
            <div class="notification-bar"><div class="notification-text">您的爱情钥匙还没使用，可解锁消息</div><button class="use-now-btn">立即使用</button></div>
            <div class="profile-card">
                <div class="profile-image-container"><img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250306123756.jpg-hzxiZ5xFnzvoxiF3XoxKLd2oq9oYub.jpeg" alt="个人照片" class="profile-image" /><div class="location-badge"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>查看你们的距离</div></div>
                <div class="profile-info">
                    <div class="profile-name-container"><h2 class="profile-name">画船听雨眠</h2><span class="verified-badge"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#4cd964" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>已实名</span></div>
                    <div class="profile-details"><span>太原</span><span class="dot-separator">•</span><span>29岁</span><span class="dot-separator">•</span><span>护士</span><span class="dot-separator">•</span><span>168cm</span></div>
                    <div class="profile-stats"><div>IP属地: 山西 | 15张照片 | 10条动态 | 26条观点</div></div>
                </div>
                <div class="profile-bio"><div class="quote-icon">"</div><p class="bio-text">我正在寻找山西太原迎泽区,年龄在21 - 35岁,学历为大学本科,月薪在12000元以上的男性</p></div>
                <div class="verification-section"><div class="verification-title">她的认证</div><div class="verification-link">邀请认证 ></div></div>
            </div>
        </div>
        <div class="app-container">
            <div class="profile-header"><h1 class="username">画船听雨眠</h1><button class="follow-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>关注</button></div>
            <div class="notification-bar"><div class="notification-text">您的爱情钥匙还没使用，可解锁消息</div><button class="use-now-btn">立即使用</button></div>
            <div class="card verification-card">
                <div class="verification-items">
                    <div class="verification-item verified"><div class="verification-icon id-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div><div class="verification-text">实名已认证</div></div>
                    <div class="verification-item unverified"><div class="verification-icon education-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></div><div class="verification-text">学历未认证</div></div>
                    <div class="verification-item unverified"><div class="verification-icon income-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></div><div class="verification-text">工作收入未认证</div></div>
                </div>
                <div class="expand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
            </div>
            <div class="card details-card">
                <h2 class="section-title">她的详细资料</h2>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div><div class="detail-tags"><span class="detail-tag">29岁</span><span class="detail-tag">未婚</span><span class="detail-tag">168cm</span><span class="detail-tag">金牛座</span><span class="detail-tag">汉族</span></div></div>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg></div><div class="detail-tags"><span class="detail-tag">现居太原迎泽区</span><span class="detail-tag">山西太原人</span><span class="detail-tag">已购房</span><span class="detail-tag">未买车</span></div></div>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg></div><div class="detail-tags"><span class="detail-tag">护士</span><span class="detail-tag">月收入5 - 8千</span><span class="detail-tag">大学本科</span></div></div>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path></svg></div><div class="detail-tags"><span class="detail-tag">时机成熟就结婚</span><span class="detail-tag">没有孩子</span><span class="detail-tag">想要孩子</span></div></div>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></div><div class="detail-tags"><span class="detail-tag">65kg</span><span class="detail-tag">不吸烟</span><span class="detail-tag">社交场合会喝酒</span></div></div>
            </div>
            <div class="card criteria-card">
                <h2 class="section-title">她的择偶条件</h2>
                <div class="detail-section"><div class="detail-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div><div class="detail-tags"><span class="detail-tag">21 - 35岁</span><span class="detail-tag">未婚</span><span class="detail-tag">170cm以上</span></div></div>
                <div class="expand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
            </div>
        </div>
        <div class="profile-container">
            <div class="card mate-preferences">
                <div class="preference-items">
                    <div class="preference-item"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>基本条件</span></div>
                </div>
            </div>
        </div>
        <div class="home4-container"></div>
        <div class="floating-buttons"><button class="message-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></button><button class="hi-btn">Hi</button></div>
    </div>
    <FooterBar></FooterBar>
</template>

<script setup>
import { ref, onBeforeUnmount, nextTick, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import FooterBar from '@/components/footerBar/FooterBar.vue';

const userInfo = ref()
onMounted(() => {getData()})
const getData = () => {const response = request({url: '/api/getRemind',method: 'post',data: { "userId": "" },headers: { 'Content-Type': 'multipart/form-data' }})}
</script>



<style lang="css" scoped>
.app-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  background-color: #f5f5f5;
  height: 0vh;
  position: relative;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f8f0ff;
  color: #000;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.battery-percent {
  background-color: #000;
  color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 12px;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.tabs {
  display: flex;
  gap: 20px;
  font-size: 18px;
  font-weight: bold;
}

.tab {
  padding: 5px 0;
  position: relative;
}

.tab.active {
  color: #6366f1;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #6366f1;
  border-radius: 3px;
}

.search-icon {
  display: flex;
  align-items: center;
  color: #333;
}

/* 通知条样式 */
.notification-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #fff;
  margin: 10px 0;
}

.use-now-btn {
  background-color: transparent;
  border: 1px solid #6366f1;
  color: #6366f1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* 个人资料卡片样式 */
.profile-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 15px 0;
}

.profile-image-container {
  position: relative;
  width: 100%;
  height: 350px;
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.profile-info {
  padding: 15px;
}

.profile-name-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.profile-name {
  font-size: 22px;
  margin: 0;
}

.verified-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  background-color: #e6ffea;
  color: #4cd964;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.profile-details {
  color: #666;
  margin-bottom: 5px;
  font-size: 15px;
}

.dot-separator {
  margin: 0 5px;
}

.profile-stats {
  color: #999;
  font-size: 13px;
}

/* 个人介绍样式 */
.profile-bio {
  position: relative;
  background-color: #f9f9f9;
  padding: 15px;
  margin: 10px 0;
}

.quote-icon {
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 40px;
  color: #ddd;
  font-family: serif;
}

.bio-text {
  margin-left: 20px;
  color: #333;
  line-height: 1.5;
}

/* 认证信息样式 */
.verification-section {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid #eee;
  color: #999;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #f8f0ff;
  color: #000;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.battery-percent {
  background-color: #000;
  color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 12px;
}

/* 用户名和关注按钮 */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f0ff;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #6366f1;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* 通知条样式 */
.notification-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #fff;
  margin: 10px 0;
}

.use-now-btn {
  background-color: transparent;
  border: 1px solid #6366f1;
  color: #6366f1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* 卡片通用样式 */
.card {
  background-color: #fff;
  border-radius: 12px;
  margin: 10px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 认证信息卡片 */
.verification-card {
  position: relative;
}

.verification-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.verification-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  margin-bottom: 10px;
}

.verification-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.id-icon {
  background-color: rgba(76, 217, 100, 0.1);
  color: #4cd964;
}

.education-icon, .income-icon {
  background-color: #f0f0f0;
  color: #999;
}

.verification-text {
  font-size: 14px;
  text-align: center;
}

.verified {
  color: #4cd964;
}

.unverified {
  color: #999;
}

.expand-icon {
  text-align: center;
  margin-top: 10px;
  color: #999;
}

/* 详细资料卡片 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
  color: #333;
}

.detail-section {
  display: flex;
  margin-bottom: 20px;
}

.detail-icon {
  width: 40px;
  height: 40px;
  color: #666;
  display: flex;
  align-items: center;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.detail-tag {
  background-color: #f5f5f5;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
}
.floating-buttons {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 100;
}

.message-btn,
.hi-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message-btn {
    background: #6366f1;
}

.hi-btn {
    background: #ff6b81;
    color: white;
    font-size: 18px;
    font-weight: bold;
}
.profile-container {
  max-width: 414px;
  margin: 0 auto;
  background: #f5f5f5;
  min-height: 10vh;
  padding-bottom: 80px;
}

.card {
  background: #fff;
  border-radius: 12px;
  margin: 12px;
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.view-all {
  color: #666;
  font-size: 14px;
  text-decoration: none;
}

/* 择偶条件样式 */
.mate-preferences {
  margin-top: 12px;
}

.preference-items {
  display: flex;
  gap: 12px;
}

.preference-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
}

/* 动态样式 */
.status-content {
  background: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
}

.status-text {
  margin: 0;
  font-size: 15px;
  color: #333;
}

/* 兴趣爱好样式 */
.interest-items {
  display: grid;
  gap: 12px;
}

.interest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.interest-label {
  color: #666;
  font-size: 14px;
}

.interest-value {
  color: #333;
  font-size: 14px;
}

/* 观点样式 */
.viewpoint-preview {
  background: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
}

.viewpoint-text {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 15px;
}

.viewpoint-answer {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.profile-page {
  max-width: 414px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #f8f0ff 0%, #f5f5f5 200px);
  min-height: 100vh;
  padding-bottom: 80px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  color: #000;
}

.status-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.battery {
  background: #000;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #6366f1;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.notification-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  margin: 0 12px;
  border-radius: 8px;
}

.use-now-btn {
  border: 1px solid #6366f1;
  color: #6366f1;
  background: transparent;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
}

.card {
  background: white;
  border-radius: 12px;
  margin: 12px;
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.view-all {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.preference-items {
  display: flex;
  gap: 12px;
}

.preference-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
}

.status-content, .viewpoint-content {
  background: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
}

.interest-list {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.interest-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.interest-label {
  color: #666;
}

.viewpoint-question {
  margin: 0 0 8px 0;
  color: #333;
}

.viewpoint-answer {
  margin: 0;
  color: #666;
}

.expand-icon {
  text-align: center;
  margin-top: 8px;
  color: #999;
}
</style>